<template>
    <div>
        <!-- <div class="educationClass">
            <el-button :type="item.isActive?'primary':''" v-for="(item,index) in educationClassList" :key="index" @click="educationClassClick(item)">{{item.name}}</el-button>
        </div> -->
        <!--<div class="tabList">-->
            <!--<div class="tabItem active">{{currentAcademicTitle}}</div>-->
        <!--</div>-->
        <div class="main-content">

            <div  :id="'module_' + index" class="module" v-for="(moduleObj,index) in allFieldList" :key="index">
                <div class="moduleTitle">{{moduleObj.moduleName}}</div>

                <div class="group" v-for="(groupObj,gIndex) in moduleObj.groupList" :key="gIndex" :id="groupObj.id">
                    <div class="groupTitle">* {{groupObj.name}}</div>

                    <div class="section" v-for="(paramList,sIndex) in groupObj.section" :key="sIndex">

                        <div v-show="groupObj.id == '10100'" class="userPhoto">
                            <img :src="defaultAvatar">
                        </div>

                        <div class="formItem" v-for="(param,pIndex) in paramList" :key="pIndex" :class="param.class">
                            <div class="name"> <i v-show="param.type == 'file'" class="iconfont iconfujian"></i>{{param.name}}：</div>
                            
                            <div v-if="param.type == 'file'" class="value">{{param.userSelection.parameterValue.split('/')[param.userSelection.parameterValue.split('/').length-1]}}</div>
                            <div v-else-if="param.type == 'img'" class="value">{{param.userSelection.parameterValue.split('/')[param.userSelection.parameterValue.split('/').length-1]}}</div>
                            <div v-else class="value">{{param.userSelection.parameterValue}}
                                <i v-show="param.baseParameterGroupParamList.length > 0" class="iconfont icontianjialiebiaoxiang" @click="dialogVisible_1_manualShow(param.id,param.name)"></i>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>



        <div class="rightSideTab">
            <div class="content" v-for="(moduleObj,mIndex) in allFieldList" :key="mIndex">
                <div class="moduleName" @click="rightSideTabModuleClick(moduleObj,mIndex)">{{moduleObj.moduleName}}</div>
                <div class="item" :rightSideItemId="item.id" :class="{active:item.id == activeGroup}" v-for="(item,gIndex) in moduleObj.groupList" :key="gIndex" @click="rightSideTabItemClick(item,mIndex,gIndex)">
                <div class="line"></div>
                    <div class="text">{{item.name}}</div>
                </div>
            </div>
        </div>


        <!-- <div class="bottomContent">
            <div class="leftList">
                <div class="title">各类职称评审业绩条件</div>
                <div class="item" v-for="(item,index) in categoryList" :key="index">
                    <div class="title">{{item.name}}</div>
                    <div class="detaile">查看详情</div>
                </div>
            </div>
            <div class="rightList">
                <div class="title">最新公告</div>
                <div class="item" v-for="(item,index) in sysNoticeList" :key="index">
                    <div class="title">{{item.title}}</div>
                    <div class="detaile">查看详情 ></div>
                </div>
            </div>
        </div> -->


        <!-- 弹框：二级数据列表 -->
        <div v-show="dialogVisible_1" class="dialogVisible_1"  @click.stop="dialogVisible_1=false">
            <div class="container" @click.stop="dialogVisible_1=true">
                <div class="title">
                    <div>{{dialogVisible_1_title}}</div>
                    <div class="close" @click.stop="dialogVisible_1=false"><i class="el-icon-close"></i></div>
                </div>
                <div class="content">
                    <el-table :data="dialogVisible_1_data" border size="mini" style="width: 100%" header-row-class-name="table-header">
                        <el-table-column prop="headObj.userSelection" :label="headObj.name" v-for="(headObj,headIndex) in dialogVisible_1_data_model" :key="headIndex" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row[headIndex].type == 'file'" class="value">{{scope.row[headIndex].userSelection.parameterValue.split('/')[scope.row[headIndex].userSelection.parameterValue.split('/').length-1]}}</div>
                                <div v-else-if="scope.row[headIndex].userSelection.parameterValue.length <= 0" class="value" style="color: white;">无</div>
                                <div v-else class="value">{{scope.row[headIndex].userSelection.parameterValue}}</div>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
            </div>

        </div>


    </div>
</template>

<script>
import { infoEntryAllFieldPost,sysNoticePost,findCategoryListPost } from '@/service/api'

import { infoProcessing,getParamKey,findParamByKey,makeParamKey } from '../../service/personalInfoDataProcessing'

export default {

    data(){
        return {
            // 二级弹框 - 组数据
            dialogVisible_1:false,
            dialogVisible_1_title:"",
            dialogVisible_1_data:[],
            dialogVisible_1_data_model:[],

            allFieldList:[],

            defaultAvatar:require("../../assets/默认头像.png"),

            // 右侧tab栏当前选中的组
            activeGroup:"",

            // 是否处理页面滚动操作
            isPageScrollOperation:true,


            // 各类职称评审业绩条件
            categoryList:[],
            // 系统公告
            sysNoticeList:[],

        }
    },
    mounted(){
      this.sysNotice();
      this.findCategoryList();
      this.loadBaseAllField();

      // 监听鼠标滚动
      document.addEventListener('scroll',this.handleScroll,true);
    },
    methods:{
         // 页面字段 - 加载页面所有字段\值
        loadBaseAllField(){
            infoEntryAllFieldPost().then(res => {
                if(res.code == 200){
                    var that = this;
                    var result = infoProcessing(res.data);
                    this.allFieldList = result.allFieldList; // 所有数据字段
                    this.activeGroup  = result.activeGroup;  // 当前被选中的组

                    for(var i=0;i<this.allFieldList.length;i++){
                        this.allFieldList[i].groupList.forEach(function (group) {
                            group.section.forEach(function (paramList) {
                                paramList.forEach(function (param) {
                                    if(param.id == "10100-031"){
                                        if(param.userSelection.parameterValue.length <= 0){
                                            that.defaultAvatar = require("../../assets/默认头像.png");
                                        }else{
                                            that.defaultAvatar = param.userSelection.parameterValue;
                                        }
                                    }
                                });

                            });

                        })
                    }
                }
            });
        },
        // 二级弹框 - js手动展示
        dialogVisible_1_manualShow(paramId,title){
            for(var mIndex=0;mIndex<this.allFieldList.length;mIndex++){

                var module = this.allFieldList[mIndex];
                for(var gIndex=0;gIndex<module.groupList.length;gIndex++){

                    var group = module.groupList[gIndex];
                    for(var sIndex=0;sIndex<group.section.length;sIndex++){

                        var paramList = group.section[sIndex];
                        for(var pIndex=0;pIndex<paramList.length;pIndex++){
                            if(paramList[pIndex].id == paramId){
                                this.dialogVisible_1_show(null,paramList[pIndex],title);
                            }
                        }
                    }

                }
            }
        },
        // 二级弹框 - 展示
        dialogVisible_1_show(event,param,title){
            if(event != null){
                event.target.blur();
            }
            this.dialogVisible_1_title = title;
            this.dialogVisible_1_param_userSelection = param.userSelection;
            this.dialogVisible_1_param_id = param.id;
            this.dialogVisible_1_data = param.baseParameterGroupParamList;
            this.dialogVisible_1_data_model = JSON.parse(JSON.stringify(param.baseParameterGroupParamList[0]));
            this.dialogVisible_1 = true;
        },
        // 右侧导航栏 - 点击模块
        rightSideTabModuleClick(moduleObj,mIndex){
            this.isPageScrollOperation = false;

            // scrollIntoView 用于将元素滚动到可视区域内，使用详见：https://www.jianshu.com/p/32bef36a68a0
            document.getElementById("module_" + mIndex).scrollIntoView({block: "start"});

            var that = this;
            this.timer = setTimeout(function(){
                that.isPageScrollOperation = true;
                // 删除定时器
                clearTimeout(that.timer);
            },300); 
        },
        // 右侧导航栏 - 点击组
        rightSideTabItemClick(item,mIndex,gIndex){
            this.activeGroup = item.id;

            this.isPageScrollOperation = false;

            // scrollIntoView 用于将元素滚动到可视区域内，使用详见：https://www.jianshu.com/p/32bef36a68a0
            document.getElementById(item.id).scrollIntoView({block: "center"});

            var that = this;
            this.timer = setTimeout(function(){
                that.isPageScrollOperation = true;
                // 删除定时器
                clearTimeout(that.timer);
            },300); 

            // 延时执行
            document.getElementById(item.id).setAttribute('style', 'background: #f4f7ff;');
            setTimeout(function(){ 
                document.getElementById(item.id).setAttribute('style', 'background:while;');
            }, 1000,item.id);
        },
        // 页面 - 滚动页面监听
        handleScroll(e){  

            if(e.target.className.indexOf("el-main") == -1){
                return;
            }

            var that = this;
            setTimeout(function () {
                if(e.target.classList[0] == "rightSideTab"){
                    return true;
                }
                
                if(!that.isPageScrollOperation){
                    return;
                } 

                // 默认情况下，将垂直中点距离顶部为 basePoint 的组设为当前选中的组；
                // 因此,如下逻辑将从众多组中选中垂直中点距离顶部最接近 basePoint 的组
                var basePoint = 200;

                // 获取所有组元素
                var allGroup = document.querySelectorAll(".group");

                var chosenElement = null,choseElementTop = 100000000,cTemp=0;
                for(var i=0;i<allGroup.length;i++){
                    // 获取组元素垂直中点距浏览器顶部的距离
                    cTemp = (allGroup[i].getBoundingClientRect().top - basePoint) + allGroup[i].offsetHeight/2.0;
                    
                    // 获取与 basePoint 绝对距离最小的组元素
                    if(Math.abs(cTemp) < Math.abs(choseElementTop)){
                        choseElementTop = cTemp;
                        chosenElement = allGroup[i];
                    }
                }
                if(chosenElement == null){
                    return;
                }
                // 打印当前被选中的组ID
                // console.log(chosenElement.getAttribute("id"));
                that.activeGroup = chosenElement.getAttribute("id");

                var tabItem = document.querySelector('[rightSideItemId="'+ chosenElement.getAttribute("id") +'"]');
                // var v = tabItem.getBoundingClientRect();
                // console.log(v);

                // scrollIntoView 用于将元素滚动到可视区域内，使用详见：https://www.jianshu.com/p/32bef36a68a0
                if(tabItem != null && tabItem != undefined){
                    tabItem.scrollIntoView({block: "center"});
                }
                
            },10);
        },

        sysNotice(){
            sysNoticePost().then(res => {
                if(res.code == 200){
                    this.sysNoticeList = res.data.content;
                }
            });
        },
        findCategoryList(){
            findCategoryListPost().then(res => {
                if(res.code == 200){
                    this.categoryList = res.data;
                }
            });
        },
    }


}
</script>

<style scoped>

.main-content{
    min-height: 540px;
    padding: 20px 12px;
    margin-right:184px;
    background: white;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    box-shadow: 3px 1px 12px 1px #eaeaea;
    border-radius:8px;
}

.preview-container>.content{
    background: white;
    width: calc(100% - 416px);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    
    margin-top: 80px;
    margin-bottom: 20px;

    box-shadow: 3px 1px 12px 1px #00000069;
    border-radius: 5px;
    padding-bottom:56px;
}

 .main-content>.module{
    display: flex;
    flex-direction:column;
 }

 .main-content>.module>.group{
    display: flex;
    flex-direction:column;
 }
 .main-content>.module>.group>.section{
    /*display: flex;*/
    display:block;
    flex-direction: row;
    flex-wrap:wrap;
    margin:4px 20px;
    padding-bottom: 10px;
 }
 .main-content>.module>.group>.section:not(:last-child){
     border-bottom: solid #efefef 1px;
 }


.moduleTitle{
    color: #314790;
    font-size: 26px;
    background: #F5F8FD;
    padding: 10px 0px;
    width: 100%;
    text-align: center;
    margin-top: 27px;
 }

 .groupTitle{
    display: flex;
    color: #31478F;
    padding: 24px 0px;
    padding-right: 17px;
    padding-left: 22px;
    font-weight: bold;
 }



.userPhoto{
    height: 300px;
    width: 33%;
    float: left;
}
.userPhoto>img{
    margin-left: 80px;
    object-fit: cover;
    border-radius: 8px;
    width: 197px;
    height: 300px;
}
 
 .formItem{
    width: 33%;
    /*display: flex;*/
    display:inline-flex;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    color:#333333;
    font-size:14px;
    margin:6px 0px;
}

.formItem>.name{
    text-align: right;
    padding-right: 4px;
    width: 36%;
}
.formItem>.name>i{
    color: rgb(18, 150, 219);
    margin-right: 4px;
}
.formItem>.value{
    width: 60%;
    display:flex;
}
.formItem>.value>i{
    font-size: 18px;
    cursor: pointer;
    color: #6f8bef;
    margin-left: 6px;
}

/* 50%宽度 */
.formItem_0_5{
    width:50%;
}
.formItem_0_5>.name{
    width:60%;
}
.formItem_0_5>.value{
    width:30%;
}





.bottomContent{
    margin: 24px 0px;
    display: flex;
}
.bottomContent>div{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    background: white;
    padding:14px 20px;
    border-radius:8px;
    box-shadow: 3px 1px 12px 1px #eaeaea;
}
.bottomContent>div:nth-child(1){
    margin-right: 20px;
}
.bottomContent>div:nth-child(2){
    margin-left: 20px;
}
.bottomContent>div>.title{
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #3270F3;
}

.bottomContent>div>.item{
    margin: 8px 0px;
    font-size: 12px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content:space-between;
}
.bottomContent>div>.item .detaile{
    cursor: pointer;
    color: grey;
}


.dialogVisible_1{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #0000001f;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    font-size: 14px;
    overflow: auto;
    padding: 40px 0px;
    box-sizing: border-box;
}
.dialogVisible_1>.container{
    width: 60%;
    background: white;
    border-radius: 5px;
    padding: 24px 30px 30px 30px;
    height: fit-content;
}
.dialogVisible_1 .title{
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dialogVisible_1 .title>.close{
    cursor: pointer;
}
.dialogVisible_1 >>> td,
.dialogVisible_1 >>> .cell{
    font-size: 14px;
}




/* 右侧导航栏 */
.rightSideTab{
    position: fixed;
    top: 86px;
    bottom:0px;
    right: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 173px;
}
.rightSideTab::-webkit-scrollbar {
    width: 9px;  /* 横向滚动条宽度 */
    height: 9px; /* 竖向滚动条宽度 */
    background: rgba(0,0,0,.0);
    border:none;
}
/* 滚动条 - 滚动块样式 */
.rightSideTab::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.0);
    border:none;
    border-radius:4px
}
.rightSideTab>.content{
    display: flex;
    flex-shrink:0;
    flex-direction: column;
    background: white;
    box-shadow: 3px 1px 12px 1px #eaeaea;
    border-radius: 5px;
    padding: 9px 0px;
    padding-top: 0px;
    margin-bottom: 15px;
}
.rightSideTab>.content>.moduleName{
    background: #31478F;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    padding: 11px 22px;
    color: white;
    cursor: pointer;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rightSideTab>.content>.item{
    display: flex;
    cursor: pointer;
    flex-shrink: 0;
}
.rightSideTab>.content>.item>.text{
    padding: 9px 22px;
    /* text-align: center; */
    color: #999999;
    background:white;
    flex-grow: 1;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* 使用省略号来代表被修剪的文本 */
    width: 100%;
    box-sizing: border-box;
}
.rightSideTab>.content>.item.active>.text{
    color: #31478F;
    background:#F5F8FD;
    font-weight:bold;
}
.rightSideTab>.content>.item.active>.line{
    width: 3px;
    min-width: 3px;
    background: #31478F;
}


</style>
